<template>
    <div>
        <el-card class="top"><el-header>用户积分</el-header></el-card>

        <!-- 表格展示 -->
        <el-card>
            <el-input placeholder="用户名" prefix-icon="el-icon-search" style="width: 200px" v-model="name">
            </el-input>
            <el-button type="warning" @click="reload" plain>查询</el-button>
            <el-table :data="pointsList" style="width: 100%">
                <el-table-column type="index" label="编号" width="100" align="center">
                </el-table-column>
                <el-table-column prop="uname" label="用户名" width="150" align="center">
                </el-table-column>
                <el-table-column prop="name" label="真实姓名" width="150" align="center">
                </el-table-column>
                <el-table-column prop="gender" label="性别" width="150" align="center">
                </el-table-column>
                <el-table-column prop="phone" label="联系电话" width="200" align="center">
                </el-table-column>
                <el-table-column prop="points" label="总积分" width="200" align="center">
                </el-table-column>
                <el-table-column prop="points" label="可用积分" width="200" align="center">
                </el-table-column>
            </el-table>
        </el-card>

        <!--    分页-->
        <el-row>
            <el-col style="text-align:right">
                <el-pagination :current-page="currentPage" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :page-size="pageSize" :page-sizes="[5, 10, 15]"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </el-col>
        </el-row>
    </div>

</template>

<script>
import { del } from 'vue';

export default {
    data() {
        return {
            uid: "",
            name: "",
            pointsList: [],
            formLabelWidth: '120px',
            //配置分页
            currentPage: 1,
            pageSize: 5,
            total: 0
        };
    },

    mounted() {
        this.reload();
    },

    methods: {
        reload() {
            this.$axios.get("/points/findAll?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize + "&name=" + this.name).then((res) => {
                console.log(res.data.data);
                console.log(res.data.data.list.phone);
                this.pointsList = res.data.data.list;
                this.total = res.data.data.total;
            });
        },


        //显示查询出的总条数
        handleSizeChange(val) {
            this.pageSize = val;
            this.reload();
        },

        //点击新页查询的数据
        handleCurrentChange(val) {
            this.currentPage = val;
            this.reload();
        },
    },
};
</script>

<style scoped>
.el-header {
    text-align: center;
    line-height: 30px;
    size: 120px;
}

.top {
    background-color: #D3D3D3;
    height: 60px;
}

.el-card {
    margin-top: 10px;
    margin-left: 30px;
}

.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>